<extend name="Layout/ins_page" />
<block name="content">
	<style>
		a {
			color: #353535;
		}
		a:hover {
			color: #3D3D3D;
		}
		span a {
			text-align: center;
			cursor: pointer;
		}
		#dialog2 {
			position: absolute;
			background: #fff;
			border: 1px solid #ccc;
			text-align: center;
			width: 90px;
			padding-top: 5px;
			padding-bottom: 5px;
			border-radius:2px;
		}
		#dialog2 li a {
			cursor: pointer;
			width: 80px;
			line-height: 30px;
			height: 30px;
			margin-left: auto;
			margin-right: auto;
			display: block;
			border-radius:2px;
		}
		#dialog2 li a:hover {
			background: #2794EB;
			color: #fff;
		}
		.btn-s {
			display: inline-block;
			border: 1px solid #ccc;
			line-height: 21px;
			padding-left: 4px;
			padding-right: 4px;
			background: #ffffff;
			border-raduis: 2px;
		}
	</style>
	{:W('PageHeader/simple',array('name'=>'待办事项','search'=>'L'))}
	<div class="oprator-panel">
		<div class="split"></div>
		<a id="btn_add" class="btn" >新建</a>
	</div>
	<form id="form_data" name="form_data" method='post' >
		<div>
			<div class="ul-table border-bottom">
				<ul>
					<li class="thead">
						<span class="col-20 grow-1"> 待办事项 </span>
						<span class="col-5 hidden-s">优先级</span>
						<span class="col-8 hidden-s">截至日期</span>
						<span class="col-8 hidden-s text-center">状态</span>
						<span class="col-8 ">操作</span>
					</li>
					<foreach name="list" item="vo" >
						<li class="tbody" node="{$vo.id}">
							<input class="node" type="hidden" name="node[]" value="{$vo.id}">
							<input class="priority" type="hidden" name="priority[]" value="{$vo.priority}">
							<input class="sort" type="hidden" name="sort[]">

							<span class="col-20 grow-1"> <a href="{:U('edit','id='.$vo['id'])}">{$vo.name}</a> </span>
							<span class="col-5 hidden-s">{$vo.priority}</span>
							<span class="col-8 hidden-s">{$vo.end_date}</span>
							<span class="col-8 hidden-s text-center"> <a class="status">{$vo.status|todo_status}</a> </span>
							<span class="col-8"><span class="col-2 text-center"> <a title="调高优先级" class="up"><i class="fa fa-arrow-up"></i></a> </span><span class="col-2 text-center"> <a title="调低优先级" class="down"><i class="fa fa-arrow-down"></i></a> </span> <span class="col-2 text-center"><a title="删除" class="del" data="{$vo.id}" onclick="del(this);"><i class="fa fa fa-times"></i></a> </span> </span>
						</li>
					</foreach>
				</ul>
				<br>
				<ul>
					<li class="thead">
						<span class="col-20 grow-1">已完成事项 </span>
						<span class="col-5 hidden-s">优先级</span>
						<span class="col-8 hidden-s">截至日期</span>
						<span class="col-8 hidden-s text-center">状态</span>
						<span class="col-8">操作</span>
					</li>
					<foreach name="list2" item="vo">
						<li class="tbody" node="{$vo.id}">
							<input class="node" type="hidden" name="node[]" value="{$vo.id}">
							<input class="priority" type="hidden" name="priority[]" value="{$vo.priority}">
							<input class="sort" type="hidden" name="sort[]">

							<span class="col-20 grow-1"> <a href="{:U('edit','id='.$vo['id'])}">{$vo.name}</a> </span>
							<span class="col-5 hidden-s">{$vo.priority}</span>
							<span class="col-8 hidden-s">{$vo.end_date}</span>
							<span class="col-8 hidden-s text-center"> <a class="status">{$vo.status|todo_status}</a> </span>
							<span class="col-8"><span class="col-2 text-center"><a title="调高优先级" class="up"><i class="fa fa-arrow-up"></i></a> </span><span class="col-2 text-center"> <a title="调低优先级" class="down"><i class="fa fa-arrow-down"></i></a> </span> <span class="col-2 text-center"><a title="删除" data="{$vo.id}" class="del" onclick="del(this);"><i class="fa fa fa-times"></i></a></span></span>
						</li>
					</foreach>
				</ul>
			</div>
		</div>
	</form>
	<div id="dialog2" class="hidden">
		<ul class="">
			<li>
				<a id="mark_status_1">尚未开始</a>
			</li>
			<li>
				<a id="mark_status_2">正在进行</a>
			</li>
			<li>
				<a id="mark_status_3">完成</a>
			</li>
		</ul>
	</div>
</block>
<block name="js">
	<script type="text/javascript">
		layui.use('global', function() {
			var $ = layui.jquery;

			set_return_url(null);
			$("li").each(function() {
				$(this).css("background-color", schedule_bg($(this).find("input.priority").val()));
			});

			$("#btn_add").on('click', function() {
				window.open("{:U('add')}", "_self");
			});

			$("a.up").click(function() {
				var current = $(this).parent().parent().parent();
				var prev = current.prev();
				if (current.index() > 1) {
					current.insertBefore(prev);
				}
				set_sort();
			});

			$("a.down").click(function() {
				var current = $(this).parent().parent().parent();
				var next = current.next();
				if (next) {
					current.insertAfter(next);
				}
				set_sort();
			});

			function set_sort() {
				$("li.tbody").each(function() {
					$(this).find("input.sort").val($(this).index());
				});
				var vars = $("#form_data").serialize();
				send_ajax("{:U('set_sort')}", vars);
			};

			$("li a.status").on("click", (function() {
				$this = $(this);
				$("#dialog2").css("left", $this.parents("span").offset().left - $(".layui-body").offset().left);
				$("#dialog2").css("top", $this.parents("span").offset().top - $(".layui-body").offset().top + 32);
				$("#dialog2").removeClass('hidden');
				node = $this.parents("li").find("input.node").val();
				$("#dialog2").attr("node", node);
			}));

			$('#mark_status_1').on('click', function() {
				mark_status(1);
			});

			$('#mark_status_2').on('click', function() {
				mark_status(2);
			});

			$('#mark_status_3').on('click', function() {
				mark_status(3);
			});

			function mark_status(val) {
				node = $("#dialog2").attr("node");
				if (node) {
					send_ajax("{:U('mark_status')}", "id=" + node + "&val=" + val, function(data) {
						location.reload(true);
					});
				}
			};

			$("a.del").on('click', function() {		
				id = $(this).attr('data');
				//信息框-例2
				layer.msg('确定要删除吗?', {
					time : 0,
					btn : ['确定', '取消'],
					yes : function(index) {
						var vars = "id=" + id;
						send_ajax("{:U('del')}", vars, function(ret) {
							if (ret.status) {
								layer.msg(ret.info, function() {
									location.reload(true);
								});
							}
						});
					},
					no : function(index) {
						layer.close(index);
					}
				});
			});
		});

	</script>
</block>